<template>

  <view class="page">
	 
  <view class="head-bg">
    <image src="/static/my-item/图层 1@3x.png" mode="widthFix" />
	
  </view>
  
  <view class="fake-nav">
    <text class="nav-title">个人中心</text>
  </view>
 
  <view class="user-info" @tap="goMyInfo">
    <image class="avatar" src="/static/my-item/我的.jpg" />
    <view class="name">张先生
    <text class="phone">18602564789</text>
	</view>
  </view>

  <!-- 白色内容区域 -->
  <view class="content-area">
    <!-- 我的优惠券 -->
    <view class="coupon-card" @tap="goMyCoupons">
      <view class="coupon-left">
        <view class="coupon-icon">🎫</view>
        <text class="coupon-text">我的优惠券</text>
      </view>
      <view class="coupon-right">
        <text class="coupon-count">3张</text>
        <text class="arrow">›</text>
      </view>
    </view>

    <!-- 我的订单 -->
    <view class="orders-section">
      <view class="section-header">
        <text class="section-title" >我的订单</text>
        <view class="all-orders">
          <text class="all-text" @tap="goOrder">全部订单</text>
          <text class="arrow">›</text>
        </view>
      </view>
      <view class="order-line"></view>
      <view class="order-tabs">
        <view class="order-tab unpaid">
          <text class="tab-text">待支付</text>
         
        </view>
        <view class="order-tab unused">
          <text class="tab-text">待使用</text>
         
        </view>
        <view class="order-tab to-evaluate">
          <text class="tab-text">待评价</text>
         
        </view>
      </view>
    </view>

    <!-- 我的服务 -->
    <view class="services-section">
      <text class="section-title">我的服务</text>
	  <view style="height: 10rpx;"></view>
	    <view class="order-line"></view>
      <view class="services-grid">
        <view class="service-item" @tap="goCoupon">
          <image class="service-image" src="/static/my-item/组 9@2x(3).png"></image>
          <text class="service-text">领券中心</text>
        </view>
        <view class="service-item">
<image class="service-image" src="/static/my-item/组 9@2x(4).png"></image>
          <text class="service-text">邀请好友</text>
        </view>
        <view class="service-item" @tap="goMyCar">
<image class="service-image" src="/static/my-item/组 9@2x(5).png"></image>
          <text class="service-text">我的车辆</text>
        </view>
        <view class="service-item" @tap="goConsume">
<image class="service-image" src="/static/my-item/组 9@2x(6).png"></image>
          <text class="service-text">消费记录</text>
        </view>
        <view class="service-item" @tap="goRepair">
<image class="service-image" src="/static/my-item/组 9@2x(7).png"></image>
          <text class="service-text">我的维修</text>
        </view>
        <view class="service-item">
<image class="service-image" src="/static/my-item/组 9@2x(8).png"></image>
          <text class="service-text">意见反馈</text>
        </view>
        <view class="service-item">
<image class="service-image" src="/static/my-item/组 9@2x(9).png"></image>
          <text class="service-text">收货地址</text>
        </view>
        <view class="service-item" @tap="goRealname">
<image class="service-image" src="/static/my-item/实名认证.png"></image>
          <text class="service-text">实名认证</text>
        </view>
        <view class="service-item empty"></view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <view class="logout-btn" @tap="goLogout">
        <text class="logout-text">退出登录</text>
      </view>
    </view>
  </view>


  </view>
</template>

<script>
	// import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
	export default {
	  name: 'HomeIndex',
	   // components: { CustomTabBar },
	data() {
		return {
		statusBarHeight: uni.getSystemInfoSync().statusBarHeight   /* 刘海高度 */
		}
	},
	methods:{
		goMyInfo(){
			uni.navigateTo({
				url:'/my-item/my-update/my-info'
			})
		},
		goCoupon() {
		    uni.navigateTo({ url: '/my-item/CouponCenter/index'})   // 换成你的实际路径
		  },
		  goOrder(){
			  uni.navigateTo({
			  	url: '/my-item/Order/index'
			  })
		  },
		  goRepair(){
			  uni.navigateTo({
			  	url: '/my-item/Repair/index'
			  })
		  },
		goMyCoupons(){
			uni.navigateTo({
				url: '/my-item/mycoupons/mycoupons'
			})
		},
		goMyCar(){
			uni.navigateTo({
				url: '/my-item/mycar/mycar'
			})
		},
		goConsume(){
			uni.navigateTo({
				url: '/my-item/ConsumeRecord/index'
			})
		},
		goRealname(){
			uni.navigateTo({
				url: '/my-item/realname/realname'
			})
		},
		goLogout(){
			// 清除用户登录信息（这里可以根据实际需求添加）
			// uni.removeStorageSync('token');
			// uni.removeStorageSync('userInfo');
			
			// 直接跳转到登录页面
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
	}
}
</script>

<style>
	.page{padding-bottom: 120rpx;
	background-image: "";
	}
.head-bg{ width: 100%; }
.head-bg image{ width: 100%; height: 320rpx; }   /* 图高自定 */
.fake-nav{
	 position: absolute;
 top: 10rpx;                 /* 向下挪一点，避开状态栏 */
  left: 280rpx;
  height: 40px;         /* 标准导航栏高 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 17px;
  font-weight: 500;
}
/* 用户信息（绝对定位叠在图上方） */
.user-info{
  position: absolute;
  top: 120rpx;                 /* 向下挪一点，避开状态栏 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}
.avatar{ width: 100rpx; height: 100rpx; border-radius: 50%; margin-bottom: 20rpx; }
.name{ font-size: 36rpx; font-weight: bold; margin-bottom: 8rpx; }
.phone{ padding: 10rpx; font-size: 28rpx; }

/* 白色内容区域 */
.content-area {
	position: relative;
  background: #f5f5f5;
  margin-top: -10rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 30rpx;
  min-height: calc(100vh - 400rpx);
}

/* 优惠券卡片 */
.coupon-card {
	position: relative;
	top: -80rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coupon-left {
  display: flex;
  align-items: center;
}

.coupon-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.coupon-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.coupon-right {
  display: flex;
  align-items: center;
}

.coupon-count {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.arrow {
  color: #999;
  font-size: 32rpx;
}

/* 我的订单 */
.orders-section {
	position: relative;
	top: -90rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 10rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
}
.order-line{
	height: 7rpx;
	background-color: rgba(247,247,247);
	margin-bottom: 30rpx;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  
}

.all-orders {
  display: flex;
  align-items: center;
}

.all-text {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.order-tabs {
  display: flex;
  gap: 20rpx;
}

.order-tab {
  flex: 1;
  height: 120rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.order-tab.unpaid {
	background-image: url('/static/my-item/组 9@2x(0).png');
	background-size: contain;        /* ① 完整塞进容器 */
	  background-position: center;     /* ② 居中 */
	  background-repeat: no-repeat;
}

.order-tab.unused {
  background-image: url('/static/my-item/组 9@2x(1).png');
  background-size: contain;        /* ① 完整塞进容器 */
    background-position: center;     /* ② 居中 */
    background-repeat: no-repeat;
}

.order-tab.to-evaluate {
 background-image: url('/static/my-item/组 9@2x(2).png');
 background-size: contain;        /* ① 完整塞进容器 */
   background-position: center;     /* ② 居中 */
   background-repeat: no-repeat;
}

.tab-text {
  color: white;
  font-size: 28rpx;
  font-weight: 600;
  z-index: 2;
}

.tab-watermark {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  font-size: 40rpx;
  color: rgba(255,255,255,0.3);
  z-index: 1;
}

/* 我的服务 */
.services-section {
	position: relative;
	top: -50rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  margin-top: 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx;
}

.service-item.empty {
  visibility: hidden;
}

.service-image {
  width: 40rpx;
  height: 40rpx;
  /* border-radius: 16rpx; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  margin-bottom: 16rpx;
}



.service-text {
  font-size: 1rpx;
  color: #666;
  text-align: center;
}

/* 退出登录 */
.logout-section {
  margin-top: 20rpx;
}

.logout-btn {
  background: rgba(217,217,217);
  border-radius: 100rpx;
  padding: 30rpx;
  text-align: center;
}

.logout-text {
  font-size: 32rpx;
  color: white;
  font-weight: 500;
}
</style>
